@dxos/plugin-chess 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

package/src/components/ChessComponent.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { getSpace } from '@dxos/react-client/echo';
+import { ChessModel, Board, Chessboard, type BoardRootProps } from '@dxos/react-ui-gameboard';
+
+import { type ChessType } from '../types';
+
+export const ChessComponent = ({ game }: { game: ChessType }) => {
+  const model = useMemo(() => new ChessModel(), []);
+  useEffect(() => {
+    if (!model || game.pgn !== model?.game.pgn()) {
+      const chess = new Chess();
+      if (game.pgn) {
+        chess.loadPgn(game.pgn);
+      }
+
+      model.initialize(chess.fen());
+    }
+  }, [game.pgn]);
+
+  const space = getSpace(game);
+  if (!space) {
+    return null;
+  }
+
+  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>(
+    (move) => {
+      if (model.makeMove(move)) {
+        game.pgn = model.game.pgn();
+        return true;
+      }
+
+      return false;
+    },
+    [model],
+  );
+
+  return (
+    <Board.Root model={model} onDrop={handleDrop}>
+      <Chessboard />
+    </Board.Root>
+  );
+};

package/src/components/ChessContainer.tsx

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ComponentProps } from 'react';
+import React from 'react';
 
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { Chess } from './Chess';
+import { ChessComponent } from './ChessComponent';
+import { PlayerSelector } from './PlayerSelector';
+import { type ChessType } from '../types';
 
-const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game'> & { role?: string }) => {
+const ChessContainer = ({ game }: { game: ChessType; role?: string }) => {
   const space = getSpace(game);
   if (!space) {
     return null;
@@ -17,7 +19,15 @@ const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game
 
   return (
     <StackItem.Content toolbar={false}>
-      <Chess game={game} space={space} playerSelector={role === 'article'} />
+      <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
+        <div />
+
+        <div className='flex m-4 overflow-hidden'>
+          <ChessComponent game={game} />
+        </div>
+
+        <PlayerSelector space={space} game={game} />
+      </div>
     </StackItem.Content>
   );
 };

package/src/components/ChessPanel.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowURightDown, Circle } from '@phosphor-icons/react';
+import { type Color } from 'chess.js';
+import React, { type FC } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type ChessModel } from '@dxos/react-ui-gameboard';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+export type ChessPanelProps = ThemedClassName<{
+  model: ChessModel;
+  orientation?: Color;
+  onFlip?: () => void;
+}>;
+
+export const ChessPanel: FC<ChessPanelProps> = ({ classNames, model, orientation = 'w', onFlip }) => {
+  const game = model.game;
+  const history = game.history();
+  const label = game.isGameOver()
+    ? game.isCheckmate()
+      ? 'CHECKMATE'
+      : game.isStalemate()
+        ? 'STALEMATE'
+        : 'DRAW'
+    : game.isCheck()
+      ? 'CHECK'
+      : history.length
+        ? `Move ${history.length}`
+        : '';
+
+  const Player = ({ color }: { color: Color }) => {
+    const turn = color === game.turn();
+
+    return (
+      <div className='flex items-center'>
+        <Circle
+          className={mx(getSize(4), turn && (game.isCheckmate() ? 'text-red-500' : 'text-green-500'))}
+          weight={turn ? 'fill' : 'thin'}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className={mx('flex flex-col', classNames)}>
+      <div className='flex items-center justify-between pl-2 pr-2 border-b' style={{ height: 32 }}>
+        <Player color={orientation === 'w' ? 'b' : 'w'} />
+        {onFlip && (
+          <button onClick={onFlip}>
+            <ArrowURightDown weight='thin' className={getSize(6)} />
+          </button>
+        )}
+      </div>
+
+      <div className='flex flex-col justify-center pl-2 font-thin' style={{ height: 40 }}>
+        {label}
+      </div>
+
+      <div className='flex items-center justify-between pl-2 pr-2 border-t' style={{ height: 32 }}>
+        <Player color={orientation} />
+      </div>
+    </div>
+  );
+};

package/src/components/Chessboard.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useMemo } from 'react';
+
+import { Board, Chessboard, ChessModel } from '@dxos/react-ui-gameboard';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ChessPanel } from './ChessPanel';
+
+const Render = () => {
+  const model = useMemo(() => new ChessModel(), []);
+
+  return (
+    <div className='flex grow mx-8 gap-8 items-center overflow-hidden'>
+      <Board.Root model={model} onDrop={(move) => model.makeMove(move)}>
+        <Chessboard />
+      </Board.Root>
+      <ChessPanel model={model} classNames='w-[200px]' />
+    </div>
+  );
+};
+
+const meta: Meta<typeof Chessboard> = {
+  title: 'plugins/plugin-chess/Chessboard',
+  component: Chessboard,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+type Story = StoryObj<typeof Chessboard>;
+
+export default meta;
+
+export const Default: Story = {};

package/src/components/{Chess.tsx → PlayerSelector.tsx}

@@ -3,64 +3,16 @@
 //
 
 import { CrownCross } from '@phosphor-icons/react';
-import { Chess as ChessJs } from 'chess.js';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { generateName } from '@dxos/display-name';
-import { invariant } from '@dxos/invariant';
 import { useMembers, type Space, type SpaceMember } from '@dxos/react-client/echo';
 import { Input, Select, useThemeContext } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { Chessboard, type ChessModel, type ChessMove } from './Chessboard';
 import { type ChessType } from '../types';
 
-const useChessModel = (game: ChessType) => {
-  const [model, setModel] = useState<ChessModel>();
-
-  useEffect(() => {
-    if (!model || game.pgn !== model?.chess.pgn()) {
-      const chess = new ChessJs(game.pgn ? undefined : game.fen);
-      if (game.pgn) {
-        chess.loadPgn(game.pgn);
-      }
-
-      setModel({ chess });
-    }
-  }, [game.pgn]);
-
-  const handleUpdate = (move: ChessMove) => {
-    invariant(model);
-    if (model.chess.move(move)) {
-      game.pgn = model.chess.pgn();
-      game.fen = model.chess.fen();
-      setModel({ ...model });
-    }
-  };
-
-  return { model, handleUpdate };
-};
-
-export const Chess = ({ space, game, playerSelector }: { space: Space; game: ChessType; playerSelector?: boolean }) => {
-  const { model, handleUpdate } = useChessModel(game);
-  if (!model) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
-      <div />
-      <div className='flex grow justify-center overflow-hidden'>
-        <div className='flex grow max-w-[600px] items-center overflow-hidden'>
-          <Chessboard model={model} onUpdate={handleUpdate} />
-        </div>
-      </div>
-      {playerSelector && <PlayerSelector game={game} space={space} />}
-    </div>
-  );
-};
-
-const PlayerSelector = ({ game, space }: { game: ChessType; space: Space }) => {
+export const PlayerSelector = ({ space, game }: { space: Space; game: ChessType }) => {
   const members = useMembers(space.key);
 
   return (

package/src/components/index.ts

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

package/src/meta.ts

@@ -9,7 +9,9 @@ export const CHESS_PLUGIN = 'dxos.org/plugin/chess';
 export const meta = {
   id: CHESS_PLUGIN,
   name: 'Chess',
-  description: 'Play chess.',
+  description:
+    'Chess is a simple plugin which allows you to render an interactive chessboard inside of a plank. This chessboard can be used for collaborative chess games, or for practice experiments with the LLM. ',
   icon: 'ph--shield-chevron--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-chess',
+  screenshots: ['https://dxos.network/plugin-details-chess-dark.png'],
 } satisfies PluginMeta;

package/dist/lib/browser/ChessContainer-G736GS2V.mjs

@@ -1,26 +0,0 @@
-import {
-  Chess
-} from "./chunk-JUAC2NNR.mjs";
-
-// packages/plugins/plugin-chess/src/components/ChessContainer.tsx
-import React from "react";
-import { getSpace } from "@dxos/react-client/echo";
-import { StackItem } from "@dxos/react-ui-stack";
-var ChessContainer = ({ game, role }) => {
-  const space = getSpace(game);
-  if (!space) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(StackItem.Content, {
-    toolbar: false
-  }, /* @__PURE__ */ React.createElement(Chess, {
-    game,
-    space,
-    playerSelector: role === "article"
-  }));
-};
-var ChessContainer_default = ChessContainer;
-export {
-  ChessContainer_default as default
-};
-//# sourceMappingURL=ChessContainer-G736GS2V.mjs.map

package/dist/lib/browser/ChessContainer-G736GS2V.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ChessContainer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentProps } from 'react';\n\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { Chess } from './Chess';\n\nconst ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game'> & { role?: string }) => {\n  const space = getSpace(game);\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content toolbar={false}>\n      <Chess game={game} space={space} playerSelector={role === 'article'} />\n    </StackItem.Content>\n  );\n};\n\nexport default ChessContainer;\n"],
-  "mappings": ";;;;;AAIA,OAAOA,WAAoC;AAE3C,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;AAI1B,IAAMC,iBAAiB,CAAC,EAAEC,MAAMC,KAAI,MAAkE;AACpG,QAAMC,QAAQC,SAASH,IAAAA;AACvB,MAAI,CAACE,OAAO;AACV,WAAO;EACT;AAEA,SACE,sBAAA,cAACE,UAAUC,SAAO;IAACC,SAAS;KAC1B,sBAAA,cAACC,OAAAA;IAAMP;IAAYE;IAAcM,gBAAgBP,SAAS;;AAGhE;AAEA,IAAA,yBAAeF;",
-  "names": ["React", "getSpace", "StackItem", "ChessContainer", "game", "role", "space", "getSpace", "StackItem", "Content", "toolbar", "Chess", "playerSelector"]
-}