@dxos/plugin-chess 0.7.5-main.9d2a38b → 0.7.5-main.ff8607b

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,63 +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 GameType } from '../types';
 
-const useChessModel = (game: GameType) => {
-  const [model, setModel] = useState<ChessModel>();
-
-  useEffect(() => {
-    if (!model || game.pgn !== model?.chess.pgn()) {
-      const chess = new ChessJs();
-      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();
-      setModel({ ...model });
-    }
-  };
-
-  return { model, handleUpdate };
-};
-
-export const Chess = ({ space, game, playerSelector }: { space: Space; game: GameType; 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: GameType; space: Space }) => {
+export const PlayerSelector = ({ game, space }: { game: GameType; space: Space }) => {
   const members = useMembers(space.key);
 
   return (

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;