@dxos/plugin-chess 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/src/components/Info.tsx

@@ -0,0 +1,240 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { type JSX, type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { Obj } from '@dxos/echo';
+import { type SpaceMember, 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/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 db = Obj.getDatabase(model.object);
+  const members = useMembers(db?.spaceId);
+
+  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 moveIndex = useAtomValue(model.moveIndex);
+  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="${moveIndex - 1}"]`);
+    scrollerRef.current?.classList.add('scrollbar-none');
+    div?.scrollIntoView({ behavior: 'smooth' });
+    scrollerRef.current?.classList.remove('scrollbar-none');
+  }, [moveIndex]);
+
+  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 === moveIndex - 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 === moveIndex - 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/index.ts

@@ -2,8 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './blueprints';
 export * from './capabilities';
 export * from './components';
 export * from './meta';
+export * from './types';
 
 export * from './ChessPlugin';

package/src/meta.ts

@@ -2,16 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const CHESS_PLUGIN = 'dxos.org/plugin/chess';
-
-export const meta: PluginMeta = {
-  id: CHESS_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'dxos.org/plugin/chess',
   name: '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. ',
+  description: trim`
+    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

@@ -5,21 +5,32 @@
 import { type Resource } from '@dxos/react-ui';
 
 import { meta } from './meta';
-import { ChessType } from './types';
+import { Chess } from './types';
 
 export const translations = [
   {
     'en-US': {
-      [ChessType.typename]: {
+      [Chess.Game.typename]: {
         'typename label': 'Game',
         'typename label_zero': 'Games',
         'typename label_one': 'Game',
         'typename label_other': 'Games',
         'object name placeholder': 'New game',
+        'rename object label': 'Rename game',
+        'delete object label': 'Delete game',
+        'object deleted label': 'Game deleted',
       },
       [meta.id]: {
         'plugin name': 'Chess',
         'delete game label': 'Delete',
+        '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

@@ -0,0 +1,58 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Chess as ChessJS } from 'chess.js';
+import * as Schema from 'effect/Schema';
+
+import { Obj, Type } from '@dxos/echo';
+import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+import { log } from '@dxos/log';
+
+export const Game = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  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, FormInputAnnotation.set(false), Schema.optional),
+  pgn: Schema.String.annotations({
+    description: 'Portable Game Notation.',
+  }).pipe(FormInputAnnotation.set(false), Schema.optional),
+  fen: Schema.String.annotations({
+    description: 'Forsyth-Edwards Notation.',
+  }).pipe(FormInputAnnotation.set(false), Schema.optional),
+}).pipe(
+  Type.object({
+    typename: 'dxos.org/type/Chess',
+    version: '0.2.0',
+  }),
+  LabelAnnotation.set(['name']),
+);
+
+export interface Game extends Schema.Schema.Type<typeof Game> {}
+
+export const make = ({ name, pgn, fen }: { name?: string; pgn?: string; fen?: string } = {}) => {
+  const chess = new ChessJS();
+  if (pgn) {
+    try {
+      chess.loadPgn(pgn);
+    } catch {
+      log.warn(pgn);
+    }
+  }
+
+  return Obj.make(Game, {
+    name,
+    pgn,
+    fen,
+    players: {},
+  });
+};

package/src/types/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './schema';
-export * from './types';
+export * as Chess from './Chess';

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

@@ -1,101 +0,0 @@
-import {
-  ChessComponent
-} from "./chunk-AZSYKAFK.mjs";
-
-// src/components/ChessContainer.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
-import { getSpace } from "@dxos/react-client/echo";
-import { StackItem } from "@dxos/react-ui-stack";
-
-// src/components/PlayerSelector.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { CrownCross } from "@phosphor-icons/react";
-import React from "react";
-import { generateName } from "@dxos/display-name";
-import { useMembers } from "@dxos/react-client/echo";
-import { Input, Select, useThemeContext } from "@dxos/react-ui";
-import { getSize, mx } from "@dxos/react-ui-theme";
-var PlayerSelector = ({ space, game }) => {
-  var _effect = _useSignals();
-  try {
-    const members = useMembers(space.key);
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-2 gap-8"
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-row-reverse items-center gap-2"
-    }, /* @__PURE__ */ React.createElement(PlayerSelect, {
-      side: "white",
-      value: game.playerWhite,
-      onValueChange: (player) => game.playerWhite = player,
-      members
-    })), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-row items-center gap-2"
-    }, /* @__PURE__ */ React.createElement(PlayerSelect, {
-      side: "black",
-      value: game.playerBlack,
-      onValueChange: (player) => game.playerBlack = player,
-      members
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var PlayerSelect = ({ side, value, onValueChange, members }) => {
-  var _effect = _useSignals();
-  try {
-    const { themeMode } = useThemeContext();
-    const iconFillMode = side === "black" && themeMode === "light" || side === "white" && themeMode === "dark" ? "fill" : void 0;
-    return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, null, /* @__PURE__ */ React.createElement(CrownCross, {
-      className: mx(getSize(6)),
-      weight: iconFillMode,
-      "aria-label": `Chess icon for side ${side}`
-    })), /* @__PURE__ */ React.createElement(Select.Root, {
-      value,
-      onValueChange
-    }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
-      placeholder: "Select player"
-    }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, members.map((member) => {
-      const memberKey = member.identity.identityKey.toHex();
-      const displayName = member.identity?.profile?.displayName || generateName(memberKey);
-      return /* @__PURE__ */ React.createElement(Select.Option, {
-        key: memberKey,
-        value: memberKey
-      }, displayName);
-    }))))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/ChessContainer.tsx
-var ChessContainer = ({ game }) => {
-  var _effect = _useSignals2();
-  try {
-    const space = getSpace(game);
-    if (!space) {
-      return null;
-    }
-    return /* @__PURE__ */ React2.createElement(StackItem.Content, null, /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: "grid grid-rows-[60px_1fr_60px] grow overflow-hidden"
-    }, /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("div", {
-      className: "flex m-4 overflow-hidden"
-    }, /* @__PURE__ */ React2.createElement(ChessComponent, {
-      game
-    })), /* @__PURE__ */ React2.createElement(PlayerSelector, {
-      space,
-      game
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var ChessContainer_default = ChessContainer;
-export {
-  ChessContainer_default as default
-};
-//# sourceMappingURL=ChessContainer-DL5J6VIK.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/ChessContainer.tsx", "../../../src/components/PlayerSelector.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { ChessComponent } from './ChessComponent';\nimport { PlayerSelector } from './PlayerSelector';\nimport { type ChessType } from '../types';\n\nconst ChessContainer = ({ game }: { game: ChessType; role?: string }) => {\n  const space = getSpace(game);\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content>\n      <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>\n        <div />\n\n        <div className='flex m-4 overflow-hidden'>\n          <ChessComponent game={game} />\n        </div>\n\n        <PlayerSelector space={space} game={game} />\n      </div>\n    </StackItem.Content>\n  );\n};\n\nexport default ChessContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { CrownCross } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport { generateName } from '@dxos/display-name';\nimport { useMembers, type Space, type SpaceMember } from '@dxos/react-client/echo';\nimport { Input, Select, useThemeContext } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\n\nimport { type ChessType } from '../types';\n\nexport const PlayerSelector = ({ space, game }: { space: Space; game: ChessType }) => {\n  const members = useMembers(space.key);\n\n  return (\n    <div role='none' className='grid grid-cols-2 gap-8'>\n      <div role='none' className='flex flex-row-reverse items-center gap-2'>\n        <PlayerSelect\n          side='white'\n          value={game.playerWhite}\n          onValueChange={(player) => (game.playerWhite = player)}\n          members={members}\n        />\n      </div>\n      <div role='none' className='flex flex-row items-center gap-2'>\n        <PlayerSelect\n          side='black'\n          value={game.playerBlack}\n          onValueChange={(player) => (game.playerBlack = player)}\n          members={members}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst PlayerSelect = ({\n  side,\n  value,\n  onValueChange,\n  members,\n}: {\n  side: 'white' | 'black';\n  value: string | undefined;\n  onValueChange: (player: string) => void;\n  members: SpaceMember[];\n}) => {\n  const { themeMode } = useThemeContext();\n  const iconFillMode =\n    (side === 'black' && themeMode === 'light') || (side === 'white' && themeMode === 'dark') ? 'fill' : undefined;\n\n  return (\n    <Input.Root>\n      <Input.Label>\n        <CrownCross className={mx(getSize(6))} weight={iconFillMode} aria-label={`Chess icon for side ${side}`} />\n      </Input.Label>\n      <Select.Root value={value} onValueChange={onValueChange}>\n        <Select.TriggerButton placeholder={'Select player'} />\n        <Select.Portal>\n          <Select.Content>\n            <Select.Viewport>\n              {members.map((member) => {\n                const memberKey = member.identity.identityKey.toHex();\n                const displayName = member.identity?.profile?.displayName || generateName(memberKey);\n                return (\n                  <Select.Option key={memberKey} value={memberKey}>\n                    {displayName}\n                  </Select.Option>\n                );\n              })}\n            </Select.Viewport>\n          </Select.Content>\n        </Select.Portal>\n      </Select.Root>\n    </Input.Root>\n  );\n};\n"],
-  "mappings": ";;;;;;AAIA,OAAOA,YAAW;AAElB,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;;;;ACH1B,SAASC,kBAAkB;AAC3B,OAAOC,WAAW;AAElB,SAASC,oBAAoB;AAC7B,SAASC,kBAAgD;AACzD,SAASC,OAAOC,QAAQC,uBAAuB;AAC/C,SAASC,SAASC,UAAU;AAIrB,IAAMC,iBAAiB,CAAC,EAAEC,OAAOC,KAAI,MAAqC;;;AAC/E,UAAMC,UAAUC,WAAWH,MAAMI,GAAG;AAEpC,WACE,sBAAA,cAACC,OAAAA;MAAIC,MAAK;MAAOC,WAAU;OACzB,sBAAA,cAACF,OAAAA;MAAIC,MAAK;MAAOC,WAAU;OACzB,sBAAA,cAACC,cAAAA;MACCC,MAAK;MACLC,OAAOT,KAAKU;MACZC,eAAe,CAACC,WAAYZ,KAAKU,cAAcE;MAC/CX;SAGJ,sBAAA,cAACG,OAAAA;MAAIC,MAAK;MAAOC,WAAU;OACzB,sBAAA,cAACC,cAAAA;MACCC,MAAK;MACLC,OAAOT,KAAKa;MACZF,eAAe,CAACC,WAAYZ,KAAKa,cAAcD;MAC/CX;;;;;AAKV;AAEA,IAAMM,eAAe,CAAC,EACpBC,MACAC,OACAE,eACAV,QAAO,MAMR;;;AACC,UAAM,EAAEa,UAAS,IAAKC,gBAAAA;AACtB,UAAMC,eACHR,SAAS,WAAWM,cAAc,WAAaN,SAAS,WAAWM,cAAc,SAAU,SAASG;AAEvG,WACE,sBAAA,cAACC,MAAMC,MAAI,MACT,sBAAA,cAACD,MAAME,OAAK,MACV,sBAAA,cAACC,YAAAA;MAAWf,WAAWgB,GAAGC,QAAQ,CAAA,CAAA;MAAKC,QAAQR;MAAcS,cAAY,uBAAuBjB,IAAAA;SAElG,sBAAA,cAACkB,OAAOP,MAAI;MAACV;MAAcE;OACzB,sBAAA,cAACe,OAAOC,eAAa;MAACC,aAAa;QACnC,sBAAA,cAACF,OAAOG,QAAM,MACZ,sBAAA,cAACH,OAAOI,SAAO,MACb,sBAAA,cAACJ,OAAOK,UAAQ,MACb9B,QAAQ+B,IAAI,CAACC,WAAAA;AACZ,YAAMC,YAAYD,OAAOE,SAASC,YAAYC,MAAK;AACnD,YAAMC,cAAcL,OAAOE,UAAUI,SAASD,eAAeE,aAAaN,SAAAA;AAC1E,aACE,sBAAA,cAACR,OAAOe,QAAM;QAACtC,KAAK+B;QAAWzB,OAAOyB;SACnCI,WAAAA;IAGP,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;AAOd;;;ADlEA,IAAMI,iBAAiB,CAAC,EAAEC,KAAI,MAAsC;;;AAClE,UAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAI,CAACC,OAAO;AACV,aAAO;IACT;AAEA,WACE,gBAAAE,OAAA,cAACC,UAAUC,SAAO,MAChB,gBAAAF,OAAA,cAACG,OAAAA;MAAIC,MAAK;MAAOC,WAAU;OACzB,gBAAAL,OAAA,cAACG,OAAAA,IAAAA,GAED,gBAAAH,OAAA,cAACG,OAAAA;MAAIE,WAAU;OACb,gBAAAL,OAAA,cAACM,gBAAAA;MAAeT;SAGlB,gBAAAG,OAAA,cAACO,gBAAAA;MAAeT;MAAcD;;;;;AAItC;AAEA,IAAA,yBAAeD;",
-  "names": ["React", "getSpace", "StackItem", "CrownCross", "React", "generateName", "useMembers", "Input", "Select", "useThemeContext", "getSize", "mx", "PlayerSelector", "space", "game", "members", "useMembers", "key", "div", "role", "className", "PlayerSelect", "side", "value", "playerWhite", "onValueChange", "player", "playerBlack", "themeMode", "useThemeContext", "iconFillMode", "undefined", "Input", "Root", "Label", "CrownCross", "mx", "getSize", "weight", "aria-label", "Select", "TriggerButton", "placeholder", "Portal", "Content", "Viewport", "map", "member", "memberKey", "identity", "identityKey", "toHex", "displayName", "profile", "generateName", "Option", "ChessContainer", "game", "space", "getSpace", "React", "StackItem", "Content", "div", "role", "className", "ChessComponent", "PlayerSelector"]
-}