@dxos/plugin-chess 0.8.4-main.b97322e → 0.8.4-main.bc2380dfbc

package/src/components/ChessContainer.stories.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Obj } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { useClient } from '@dxos/react-client';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
-import { CardContainer } from '@dxos/react-ui-stack/testing';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { withLayout } from '@dxos/storybook-utils';
-
-import ChessContainer from './ChessContainer';
-import { ChessType } from '../types';
-
-type StoryProps = {
-  role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
-};
-
-const render: Meta<StoryProps>['render'] = ({ role }) => {
-  const _client = useClient();
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
-  const games = useQuery(space, Filter.type(ChessType));
-  const [game, setGame] = useState<ChessType>();
-
-  useEffect(() => {
-    if (games.length && !game) {
-      const board = games[0];
-      setGame(board);
-    }
-  }, [games]);
-
-  if (!game) {
-    return <span>…</span>;
-  }
-
-  return (
-    <CardContainer icon='ph--castle-turret--regular' role={role}>
-      <ChessContainer game={game} role={role} />
-    </CardContainer>
-  );
-};
-
-const meta: Meta<StoryProps> = {
-  title: 'Cards/plugin-chess',
-  render,
-  decorators: [
-    withLayout(),
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        ClientPlugin({
-          types: [ChessType],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-            const space = await client.spaces.create();
-            await space.waitUntilReady();
-            const game = Obj.make(ChessType, {
-              name: 'Example Chess Game',
-              playerWhite: 'Player 1',
-              playerBlack: 'Player 2',
-              moves: [],
-              pgn: '',
-              fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1', // Starting position
-            });
-            space.db.add(game);
-          },
-        }),
-        StorybookLayoutPlugin(),
-        SpacePlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-      ],
-    }),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const Popover = {
-  args: {
-    role: 'card--popover',
-  },
-};
-
-export const Intrinsic = {
-  args: {
-    role: 'card--intrinsic',
-  },
-};
-
-export const Extrinsic = {
-  args: {
-    role: 'card--extrinsic',
-  },
-};

package/src/components/ChessContainer.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { getSpace } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { Chess } from './Chess';
-import { PlayerSelector } from './PlayerSelector';
-import { type ChessType } from '../types';
-
-const containFragment = 'is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]';
-
-const ChessContainer = ({ game, role }: { game: ChessType; role?: string }) => {
-  const space = getSpace(game);
-
-  if (!space) {
-    return null;
-  }
-
-  switch (role) {
-    case 'card--popover': {
-      return (
-        <Chess.Root game={game}>
-          <div role='none' className='popover-square size-container'>
-            <Chess.Board classNames={containFragment} />
-          </div>
-        </Chess.Root>
-      );
-    }
-    case 'card--extrinsic': {
-      return (
-        <Chess.Root game={game}>
-          <div role='none' className='grid is-full bs-full size-container place-content-center'>
-            <Chess.Board classNames={containFragment} />
-          </div>
-        </Chess.Root>
-      );
-    }
-    case 'card--intrinsic': {
-      return (
-        <Chess.Root game={game}>
-          <Chess.Board />
-        </Chess.Root>
-      );
-    }
-    default: {
-      return (
-        <StackItem.Content>
-          <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
-            <div />
-
-            <div className='flex m-4 overflow-hidden'>
-              <Chess.Root game={game}>
-                <Chess.Content>
-                  <Chess.Board />
-                </Chess.Content>
-              </Chess.Root>
-            </div>
-
-            <PlayerSelector space={space} game={game} />
-          </div>
-        </StackItem.Content>
-      );
-    }
-  }
-};
-
-export default ChessContainer;

package/src/components/ChessPanel.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Color } from 'chess.js';
-import React, { type FC } from 'react';
-
-import { type ThemedClassName, Icon } from '@dxos/react-ui';
-import { type ChessModel } from '@dxos/react-ui-gameboard';
-import { 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'>
-        <Icon
-          icon={turn ? 'ph--circle--fill' : 'ph--circle--thin'}
-          size={4}
-          classNames={mx(turn && (game.isCheckmate() ? 'text-red-500' : 'text-green-500'))}
-        />
-      </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}>
-            <Icon icon='ph--arrow-u-right-down--thin' size={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

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

package/src/components/PlayerSelector.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { generateName } from '@dxos/display-name';
-import { useMembers, type Space, type SpaceMember } from '@dxos/react-client/echo';
-import { Icon, Input, Select, useThemeContext } from '@dxos/react-ui';
-
-import { type ChessType } from '../types';
-
-export const PlayerSelector = ({ space, game }: { space: Space; game: ChessType }) => {
-  const members = useMembers(space.key);
-
-  return (
-    <div role='none' className='grid grid-cols-2 gap-8'>
-      <div role='none' className='flex flex-row-reverse items-center gap-2'>
-        <PlayerSelect
-          side='white'
-          value={game.playerWhite}
-          onValueChange={(player) => (game.playerWhite = player)}
-          members={members}
-        />
-      </div>
-      <div role='none' className='flex flex-row items-center gap-2'>
-        <PlayerSelect
-          side='black'
-          value={game.playerBlack}
-          onValueChange={(player) => (game.playerBlack = player)}
-          members={members}
-        />
-      </div>
-    </div>
-  );
-};
-
-const PlayerSelect = ({
-  side,
-  value,
-  onValueChange,
-  members,
-}: {
-  side: 'white' | 'black';
-  value: string | undefined;
-  onValueChange: (player: string) => void;
-  members: SpaceMember[];
-}) => {
-  const { themeMode } = useThemeContext();
-  const iconFillMode =
-    (side === 'black' && themeMode === 'light') || (side === 'white' && themeMode === 'dark') ? 'fill' : undefined;
-
-  return (
-    <Input.Root>
-      <Input.Label>
-        <Icon
-          aria-label={`Chess icon for side ${side}`}
-          icon={`ph--crown-cross--${iconFillMode || 'regular'}`}
-          size={6}
-        />
-      </Input.Label>
-      <Select.Root value={value} onValueChange={onValueChange}>
-        <Select.TriggerButton placeholder={'Select player'} />
-        <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.Content>
-        </Select.Portal>
-      </Select.Root>
-    </Input.Root>
-  );
-};

package/src/types/schema.ts

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
-
-export const MoveSchema = Schema.mutable(
-  Schema.partial(
-    Schema.Struct({
-      source: Schema.String,
-      target: Schema.String,
-      piece: Schema.String,
-    }),
-  ),
-);
-
-export const ChessType = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  playerWhite: Schema.String,
-  playerBlack: Schema.String,
-  moves: Schema.mutable(Schema.Array(Schema.String)),
-  // TODO(wittjosiah): Remove. Redundant with moves.
-  pgn: Schema.String,
-  fen: Schema.String,
-}).pipe(
-  Schema.partial,
-  Type.Obj({
-    typename: 'dxos.org/type/Chess',
-    version: '0.1.0',
-  }),
-);
-export interface ChessType extends Schema.Schema.Type<typeof ChessType> {}

package/src/types/types.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { ChessType } from './schema';
-import { meta } from '../meta';
-
-export namespace ChessAction {
-  export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
-    input: Schema.Struct({
-      name: Schema.optional(Schema.String),
-      fen: Schema.optional(Schema.String),
-    }),
-    output: Schema.Struct({
-      object: ChessType,
-    }),
-  }) {}
-}