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

package/src/components/ChessboardArticle.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
-import { IconButton, useTranslation } from '@dxos/react-ui';
+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';
@@ -12,19 +12,42 @@ import { mx } from '@dxos/react-ui-theme';
 import { meta } from '../meta';
 import { type Chess } from '../types';
 
-import { Chessboard } from './Chessboard';
+import { Chessboard, type ChessboardController, type ChessboardInfoProps } from './Chessboard';
 
-export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
+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 classNames='@container bs-full is-full overflow-hidden'>
-      <Chessboard.Root game={game}>
-        <div className={mx('grid grid-rows-[1fr_4rem] bs-full is-full gap-2', open && '@3xl:grid-cols-[1fr_320px]')}>
+    <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 orientation={orientation} />
+            <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'>
@@ -34,22 +57,10 @@ export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
                 max={8}
                 onOrientationChange={setOrientation}
                 onClose={() => setOpen(false)}
+                onSelect={handleSelect}
               />
             </div>
           )}
-          <div className='flex justify-center items-center'>
-            <Chessboard.Players>
-              <IconButton
-                variant='ghost'
-                icon='ph--info--regular'
-                iconOnly
-                label={t('button toggle info')}
-                size={6}
-                classNames={mx('invisible', !open && '@3xl:visible')}
-                onClick={() => setOpen((open) => !open)}
-              />
-            </Chessboard.Players>
-          </div>
         </div>
       </Chessboard.Root>
     </StackItem.Content>

package/src/components/ChessboardContainer.tsx

@@ -36,7 +36,7 @@ export const ChessboardContainer = ({ game, role }: ChessboardContainerProps) =>
     }
 
     default: {
-      return <ChessboardArticle game={game} />;
+      return <ChessboardArticle game={game} role={role} />;
     }
   }
 };

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/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

@@ -2,5 +2,6 @@
 // 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

@@ -3,7 +3,8 @@
 //
 
 import { Chess as ChessJS } from 'chess.js';
-import { Effect, Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
 import { ArtifactId } from '@dxos/assistant';
 import { DatabaseService, defineFunction } from '@dxos/functions';
@@ -11,7 +12,8 @@ import { DatabaseService, defineFunction } from '@dxos/functions';
 import { Chess } from '../types';
 
 export default defineFunction({
-  name: 'dxos.org/function/chess/move',
+  key: 'dxos.org/function/chess/move',
+  name: 'Move',
   description: 'Makes a move in the given chess game.',
   inputSchema: Schema.Struct({
     id: ArtifactId.annotations({
@@ -22,22 +24,22 @@ export default defineFunction({
       examples: ['e4', 'Bf3'],
     }),
   }),
-  outputSchema: Schema.Boolean.annotations({
-    description: 'False if the move was invalid.',
+  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);
-
-    // TODO(burdon): Avoid using try/catch inside Effect generators.
-    //  Use Effect's error handling mechanisms instead (e.g., Effect.try, Effect.tryPromise, Effect.catchAll, Effect.catchTag)
-    try {
-      const chess = new ChessJS();
+    const chess = new ChessJS();
+    if (object.pgn) {
       chess.loadPgn(object.pgn);
-      chess.move(move, { strict: false });
-      object.pgn = chess.pgn();
-      return true;
-    } catch {
-      return false;
+    } 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

@@ -3,43 +3,53 @@
 //
 
 import { Chess as ChessJS } from 'chess.js';
-import { Effect, Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
 import { ArtifactId } from '@dxos/assistant';
 import { DatabaseService, defineFunction } from '@dxos/functions';
-import { log } from '@dxos/log';
 
 import { Chess } from '../types';
 
 export default defineFunction({
-  name: 'dxos.org/function/chess/play',
-  description: 'Uses the chess engine to play the next move in the given game.',
+  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({
-    move: Schema.optional(Schema.String).annotations({
-      description: 'The move that was played.',
-    }),
     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 } }) {
+  handler: Effect.fn(function* ({ data: { id, side = 'any' } }) {
     const object = yield* DatabaseService.resolve(ArtifactId.toDXN(id), Chess.Game);
-
-    // Create game and make move.
     const chess = new ChessJS();
-    chess.loadPgn(object.pgn);
+    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)];
-    log.info('move', { move });
-    chess.move(move);
 
-    // Update the game state.
+    chess.move(move, { strict: false });
     object.pgn = chess.pgn();
-    return { move, pgn: chess.pgn() };
+    return { move, pgn: object.pgn };
   }),
 });

package/src/meta.ts

@@ -5,15 +5,15 @@
 import { type PluginMeta } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const CHESS_PLUGIN = 'dxos.org/plugin/chess';
-
 export const meta: PluginMeta = {
-  id: CHESS_PLUGIN,
+  id: 'dxos.org/plugin/chess',
   name: 'Chess',
   description: trim`
-    Play chess with friends or practice with the AI.
+    Full-featured chess game supporting multiplayer matches with friends or practice sessions against AI opponents.
+    Track game history and analyze moves in real-time.
   `,
   icon: 'ph--shield-chevron--regular',
+  iconHue: 'amber',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-chess',
   screenshots: ['https://dxos.network/plugin-details-chess-dark.png'],
 };

package/src/translations.ts

@@ -18,16 +18,18 @@ export const translations = [
         'object name placeholder': 'New game',
         'rename object label': 'Rename game',
         'delete object label': 'Delete game',
-        'button toggle info': 'Toggle info',
-        'button flip': 'Flip board',
       },
       [meta.id]: {
         'plugin name': 'Chess',
         'delete game label': 'Delete',
-        'game.checkmate': 'Checkmate',
-        'game.stalemate': 'Stalemate',
-        'game.draw': 'Draw',
-        'game.check': 'Check',
+        'game.checkmate label': 'Checkmate',
+        'game.stalemate label': 'Stalemate',
+        'game.draw label': 'Draw',
+        'game.check label': 'Check',
+        'select player button': 'Select player',
+        'toggle info button': 'Toggle info',
+        'close info button': 'Close info',
+        'flip board button': 'Flip board',
       },
     },
   },

package/src/types/Chess.ts

@@ -3,42 +3,45 @@
 //
 
 import { Chess as ChessJS } from 'chess.js';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Obj, Type } from '@dxos/echo';
-import { LabelAnnotation } from '@dxos/echo-schema';
+import { FormAnnotation, LabelAnnotation } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
+import { ItemAnnotation } from '@dxos/schema';
 
 export const Game = Schema.Struct({
   name: Schema.optional(Schema.String),
-  players: Schema.optional(
-    Schema.Struct({
-      white: Schema.optional(
-        Schema.String.annotations({
-          description: 'DID of white player',
-        }),
-      ),
-      black: Schema.optional(
-        Schema.String.annotations({
-          description: 'DID of black player',
-        }),
-      ),
-    }).pipe(Schema.mutable),
-  ),
+  players: Schema.Struct({
+    white: Schema.optional(
+      Schema.String.annotations({
+        description: 'DID of white player',
+      }),
+    ),
+    black: Schema.optional(
+      Schema.String.annotations({
+        description: 'DID of black player',
+      }),
+    ),
+  }).pipe(Schema.mutable, FormAnnotation.set(false), Schema.optional),
   pgn: Schema.String.annotations({
     description: 'Portable Game Notation.',
-  }),
+  }).pipe(FormAnnotation.set(false), Schema.optional),
+  fen: Schema.String.annotations({
+    description: 'Forsyth-Edwards Notation.',
+  }).pipe(FormAnnotation.set(false), Schema.optional),
 }).pipe(
   Type.Obj({
     typename: 'dxos.org/type/Chess',
     version: '0.2.0',
   }),
   LabelAnnotation.set(['name']),
+  ItemAnnotation.set(true),
 );
 
 export interface Game extends Schema.Schema.Type<typeof Game> {}
 
-export const makeGame = ({ name, pgn }: { name?: string; pgn?: string } = {}) => {
+export const makeGame = ({ name, pgn, fen }: { name?: string; pgn?: string; fen?: string } = {}) => {
   const chess = new ChessJS();
   if (pgn) {
     try {
@@ -51,6 +54,7 @@ export const makeGame = ({ name, pgn }: { name?: string; pgn?: string } = {}) =>
   return Obj.make(Game, {
     name,
     players: {},
-    pgn: chess.pgn(),
+    pgn,
+    fen,
   });
 };

package/src/types/ChessAction.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { meta } from '../meta';
 

package/dist/lib/browser/ChessboardContainer-NNIOQIRP.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ChessboardContainer.tsx", "../../../src/components/ChessboardArticle.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { getSpace } from '@dxos/react-client/echo';\n\nimport { type Chess } from '../types';\n\nimport { Chessboard } from './Chessboard';\nimport { ChessboardArticle } from './ChessboardArticle';\n\nexport type ChessboardContainerProps = {\n  game: Chess.Game;\n  role?: string;\n};\n\nexport const ChessboardContainer = ({ game, role }: ChessboardContainerProps) => {\n  const space = getSpace(game);\n  if (!space) {\n    return null;\n  }\n\n  switch (role) {\n    case 'card--popover':\n    case 'card--intrinsic':\n    case 'card--extrinsic': {\n      return (\n        <Chessboard.Root game={game}>\n          <Chessboard.Content role={role}>\n            <Chessboard.Board />\n          </Chessboard.Content>\n        </Chessboard.Root>\n      );\n    }\n\n    default: {\n      return <ChessboardArticle game={game} />;\n    }\n  }\n};\n\nexport default ChessboardContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useState } from 'react';\n\nimport { IconButton, useTranslation } from '@dxos/react-ui';\nimport { type Player } from '@dxos/react-ui-gameboard';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { meta } from '../meta';\nimport { type Chess } from '../types';\n\nimport { Chessboard } from './Chessboard';\n\nexport const ChessboardArticle = ({ game }: { game: Chess.Game }) => {\n  const { t } = useTranslation(meta.id);\n  const [orientation, setOrientation] = useState<Player>('white');\n  const [open, setOpen] = useState(true);\n\n  return (\n    <StackItem.Content classNames='@container bs-full is-full overflow-hidden'>\n      <Chessboard.Root game={game}>\n        <div className={mx('grid grid-rows-[1fr_4rem] bs-full is-full gap-2', open && '@3xl:grid-cols-[1fr_320px]')}>\n          <Chessboard.Content>\n            <Chessboard.Board orientation={orientation} />\n          </Chessboard.Content>\n          {open && (\n            <div className='hidden @3xl:flex flex-col p-8 justify-center items-center overflow-hidden'>\n              <Chessboard.Info\n                orientation={orientation}\n                min={8}\n                max={8}\n                onOrientationChange={setOrientation}\n                onClose={() => setOpen(false)}\n              />\n            </div>\n          )}\n          <div className='flex justify-center items-center'>\n            <Chessboard.Players>\n              <IconButton\n                variant='ghost'\n                icon='ph--info--regular'\n                iconOnly\n                label={t('button toggle info')}\n                size={6}\n                classNames={mx('invisible', !open && '@3xl:visible')}\n                onClick={() => setOpen((open) => !open)}\n              />\n            </Chessboard.Players>\n          </div>\n        </div>\n      </Chessboard.Root>\n    </StackItem.Content>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;AAIA,OAAOA,YAAW;AAElB,SAASC,gBAAgB;;;;ACFzB,OAAOC,SAASC,gBAAgB;AAEhC,SAASC,YAAYC,sBAAsB;AAE3C,SAASC,iBAAiB;AAC1B,SAASC,UAAU;AAOZ,IAAMC,oBAAoB,CAAC,EAAEC,KAAI,MAAwB;;;AAC9D,UAAM,EAAEC,EAAC,IAAKC,eAAeC,KAAKC,EAAE;AACpC,UAAM,CAACC,aAAaC,cAAAA,IAAkBC,SAAiB,OAAA;AACvD,UAAM,CAACC,MAAMC,OAAAA,IAAWF,SAAS,IAAA;AAEjC,WACE,sBAAA,cAACG,UAAUC,SAAO;MAACC,YAAW;OAC5B,sBAAA,cAACC,WAAWC,MAAI;MAACd;OACf,sBAAA,cAACe,OAAAA;MAAIC,WAAWC,GAAG,mDAAmDT,QAAQ,4BAAA;OAC5E,sBAAA,cAACK,WAAWF,SAAO,MACjB,sBAAA,cAACE,WAAWK,OAAK;MAACb;SAEnBG,QACC,sBAAA,cAACO,OAAAA;MAAIC,WAAU;OACb,sBAAA,cAACH,WAAWM,MAAI;MACdd;MACAe,KAAK;MACLC,KAAK;MACLC,qBAAqBhB;MACrBiB,SAAS,MAAMd,QAAQ,KAAA;SAI7B,sBAAA,cAACM,OAAAA;MAAIC,WAAU;OACb,sBAAA,cAACH,WAAWW,SAAO,MACjB,sBAAA,cAACC,YAAAA;MACCC,SAAQ;MACRC,MAAK;MACLC,UAAAA;MACAC,OAAO5B,EAAE,oBAAA;MACT6B,MAAM;MACNlB,YAAYK,GAAG,aAAa,CAACT,QAAQ,cAAA;MACrCuB,SAAS,MAAMtB,QAAQ,CAACD,UAAS,CAACA,KAAAA;;;;;AAQlD;;;ADtCO,IAAMwB,sBAAsB,CAAC,EAAEC,MAAMC,KAAI,MAA4B;;;AAC1E,UAAMC,QAAQC,SAASH,IAAAA;AACvB,QAAI,CAACE,OAAO;AACV,aAAO;IACT;AAEA,YAAQD,MAAAA;MACN,KAAK;MACL,KAAK;MACL,KAAK,mBAAmB;AACtB,eACE,gBAAAG,OAAA,cAACC,WAAWC,MAAI;UAACN;WACf,gBAAAI,OAAA,cAACC,WAAWE,SAAO;UAACN;WAClB,gBAAAG,OAAA,cAACC,WAAWG,OAAK,IAAA,CAAA,CAAA;MAIzB;MAEA,SAAS;AACP,eAAO,gBAAAJ,OAAA,cAACK,mBAAAA;UAAkBT;;MAC5B;IACF;;;;AACF;AAEA,IAAA,8BAAeD;",
-  "names": ["React", "getSpace", "React", "useState", "IconButton", "useTranslation", "StackItem", "mx", "ChessboardArticle", "game", "t", "useTranslation", "meta", "id", "orientation", "setOrientation", "useState", "open", "setOpen", "StackItem", "Content", "classNames", "Chessboard", "Root", "div", "className", "mx", "Board", "Info", "min", "max", "onOrientationChange", "onClose", "Players", "IconButton", "variant", "icon", "iconOnly", "label", "size", "onClick", "ChessboardContainer", "game", "role", "space", "getSpace", "React", "Chessboard", "Root", "Content", "Board", "ChessboardArticle"]
-}